import React, { useEffect } from 'react';
import * as echarts from 'echarts/lib/echarts';
import PropTypes from 'prop-types';
import _ from 'lodash';

const GroupEchrts = (props) => {
  const { echartList, groupName } = props;
  let myChart = {};
  _.map(echartList, (item) => {
    myChart[`chart-${item.id}`] = null;
  });
  const option = {
    title: {
      text: 'Try Dragging these Points',
      left: 'center',
    },
    tooltip: {
      trigger: 'axis',
      position: function (pt) {
        return [pt[0], '10%'];
      },
    },
    grid: {
      top: '8%',
      bottom: '12%',
    },

    xAxis: {
      type: 'category',
      data: [
        '2023-05-30',
        '2023-06-01',
        '2023-06-02',
        '2023-06-03',
        '2023-06-04',
        '2023-06-05',
        '2023-06-06',
      ],
      boundaryGap: false,
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax',
      axisPointer: {
        z: 100,
      },
    },
    yAxis: {
      type: 'value',
    },
    toolbox: {
      feature: {
        dataZoom: {
          yAxisIndex: false,
        },
        brush: {
          type: ['lineX', 'clear'],
        },
      },
    },
    brush: {
      xAxisIndex: 'all',
      brushLink: 'all',
      outOfBrush: {
        colorAlpha: 0.1,
      },
    },
    dataZoom: [
      {
        type: 'slider',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'slider',
        yAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        xAxisIndex: 0,
        filterMode: 'none',
      },
      {
        type: 'inside',
        yAxisIndex: 0,
        filterMode: 'none',
      },
    ],
    series: [
      {
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line',
      },
    ],
  };
  useEffect(() => {
    _.map(echartList, (item) => {
      myChart[`chart-${item.id}`] = echarts.init(
        document.getElementById(item.id),
      );

      myChart[`chart-${item.id}`].setOption(option);
      myChart[`chart-${item.id}`].group = groupName;
      console.log(myChart, '66');
    });
    // echarts.connect(groupName);
  }, []);
  return (
    <div style={{ width: '100%' }}>
      {_.map(echartList, (item) => (
        <div
          id={item.id}
          style={{
            width: '100%',
            height: 400,
          }}
        >
          {' '}
        </div>
      ))}
    </div>
  );
};
GroupEchrts.propTypes = {
  echartList: PropTypes.array.isRequired,
};
export default GroupEchrts;
